<template>
  <div>
    <h2>商品列</h2>
    <good-list
      v-for="item in list"
      :key="item.id"
      :id="item.id"
      :pname="item.pname"
      :info="item.info"
      :price="item.price"

      
      @kanyidao="changePrice"
    >
    </good-list>
  </div>
</template>

<script>
import GoodList from "@/components/GoodList.vue";

export default {
  data() {
    return {
      list: [
        { id: 101, pname: "超级无敌棒棒糖", price: 15, info: "好吃，再来一根" },
        { id: 171, pname: "超级解渴水果茶", price: 80, info: "好甜，真好喝" },
        { id: 191, pname: "超级好吃大鸡腿", price: 60, info: "可口，下饭~" },
      ],
    };
  },
  methods: {
    changePrice(val, id) {
      // console.log(val,id);
      //根据id 查找元素  在我修改商品价格
      let res = this.list.find((item) => item.id == id)
      //修改商品价格
      res.price = res.price - val
    },
  },
  components: {
    GoodList: GoodList,
  },
};
</script>

<style >
</style>